import React, { Component } from 'react';
import {  AppRegistry,
  StyleSheet,
  DeviceEventEmitter,
  Text,
  View,
  Image,
  ListView,
  ScrollView,
  TouchableOpacity,
  PanResponder,
  Dimensions,
  TouchableHighlight,} from 'react-native';
  import Icon from 'react-native-vector-icons/Ionicons';
  import { StackNavigator } from 'react-navigation';
  import IconFA from 'react-native-vector-icons/FontAwesome';
  import Swiper from 'react-native-swiper';
  import Guan1 from './guanList';

  var navigation = null;  
  var {height, width} = Dimensions.get('window');
  var h = height/660;
  var w = width/420;
  class GugongProject extends Component {

  constructor(props) {
    super(props);
    navigation = props.navigation; 
    this.componentWillMount = this.componentWillMount.bind(this); 
    this.geren = this.geren.bind(this); 
    this.state = {
      dataSource: new ListView.DataSource({
        rowHasChanged: (row1, row2) => row1 !== row2,
      }),
      loaded: false,
      a:0,
      isRefreshing:true,
      guans:[{
        key:0,
        title:"新闻馆",
        component: Guan1,
        url: require("./img/logo/ic_logo_collect.png"),
        left:50,
        top:220,
      },{
        key:1,
        title:"展览馆",
        component: Guan1,
        url: require("./img/logo/ic_logo_edu.png"),
        left:410,
        top:150,
      },
      {
        key:2,
        title:"学术馆",
        component: Guan1,
        url: require("./img/logo/ic_logo_book.png"),
        left:770,
        top:-86,
      },{
        key:3,
        title:"垃圾场",
        component: Guan1,
        url: require("./img/logo/ic_logo_create.png"),
        left:970,
        top:-1180,
      },{
        key:4,
        title:"焚尸馆1",
        component: Guan1,
        url: require("./img/logo/ic_logo_ds.png"),
        left:610,
        top:-1610,
      },{
        key:5,
        title:"焚尸馆",
        component: Guan1,
        url: require("./img/logo/ic_logo_game.png"),
        left:250,
        top:-1760,

      },{
        key:6,
        title:"养鸡场",
        component: Guan1,
        url: require("./img/logo/ic_logo_gj.png"),
        left:-110,
        top:-1760,
      },{
        key:7,
        title:"民政局",
        component: Guan1,
        url: require("./img/logo/ic_logo_news.png"),
        left:-470,
        top:-1630,
      },{
        key:8,
        title:"财政局",
        component: Guan1,
        url: require("./img/logo/ic_logo_video.png"),
        left:-830,
        top:-1250,
      },{
        key:9,
        title:"电影院",
        component: Guan1,
        url: require("./img/logo/ic_logo_xs.png"),
        left:-710,
        top:-130,
      },{
        key:10,
        title:"美容院",
        component: Guan1,
        url: require("./img/logo/ic_logo_zl.png"),
        left:-360,
        top:132,
      },],
      guansfalse:[{
        key:0,
        title:"新闻馆1",
        url: require("./img/logo/ic_logo_collect.png"),
        left:60,
        top:100,
      },{
        key:1,
        title:"展览馆2",
        url: require("./img/logo/ic_logo_edu.png"),
        left:240,
        top:100,
      },
      {
        key:2,
        title:"学术馆3",
        url: require("./img/logo/ic_logo_book.png"),
        left:420,
        top:133,
      },{
        key:3,
        title:"垃圾场4",
        url: require("./img/logo/ic_logo_create.png"),
        left:600,
        top:203,
      },{
        key:4,
        title:"焚尸馆5",
        url: require("./img/logo/ic_logo_ds.png"),
        left:780,
        top:320,
      },{
        key:5,
        title:"焚尸馆6",
        url: require("./img/logo/ic_logo_game.png"),
        left:960,
        top:510,

      },{
        key:6,
        title:"养鸡场7",
        url: require("./img/logo/ic_logo_gj.png"),
        left:1140,
        top:955,
      },{
        key:7,
        title:"民政局8",
        url: require("./img/logo/ic_logo_news.png"),
        left:980,
        top:1650,
      },{
        key:8,
        title:"财政局9",
        url: require("./img/logo/ic_logo_video.png"),
        left:700,
        top:1930,
      },{
        key:9,
        title:"电影院10",
        url: require("./img/logo/ic_logo_xs.png"),
        left:520,
        top:2025,
      },{
        key:10,
        title:"美容院11",
        url: require("./img/logo/ic_logo_zl.png"),
        left:340,
        top:2078,
      },{
        key:11,
        title:"美容院12",
        url: require("./img/logo/ic_logo_xs.png"),
        left:160,
        top:2095,
      },{
        key:12,
        title:"美容院13",
        url: require("./img/logo/ic_logo_video.png"),
        left:-20,
        top:2081,
      },{
        key:13,
        title:"美容院14",
        url: require("./img/logo/ic_logo_news.png"),
        left:-200,
        top:2030,
      },{
        key:14,
        title:"美容院15",
        url: require("./img/logo/ic_logo_gj.png"),
        left:-380,
        top:1944,
      },{
        key:15,
        title:"美容院16",
        url: require("./img/logo/ic_logo_game.png"),
        left:-560,
        top:1800,
      },{
        key:16,
        title:"美容院17",
        url: require("./img/logo/ic_logo_ds.png"),
        left:-740,
        top:1550,
      },{
        key:17,
        title:"美容院18",
        url: require("./img/logo/ic_logo_game.png"),
        left:-780,
        top:728,
      },{
        key:18,
        title:"美容院19",
        url: require("./img/logo/ic_logo_gj.png"),
        left:-600,
        top:434,
      },{
        key:19,
        title:"美容院20",
        url: require("./img/logo/ic_logo_news.png"),
        left:-420,
        top:275,
      },{
        key:20,
        title:"美容院21",
        url: require("./img/logo/ic_logo_video.png"),
        left:-200,
        top:159,
      },],



    };


  }
  
componentWillMount(){
  const { navigate } = this.props.navigation;
        this._gestureHandlers = PanResponder.create({
            // 要求成为响应者：
            
            onStartShouldSetPanResponder: (evt, gestureState) => true,
            onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
            onMoveShouldSetPanResponder: (evt, gestureState) => true,
            onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,
      
            onPanResponderGrant: (evt, gestureState) => {
              
            },
            onPanResponderMove: (evt, gestureState) => {
                console.log(h,w);
                var aa = this.state.a;
                this.setState({a:gestureState.dx - this.state.a});
                console.log(this.state.a);
                for (var index = 0; index < this.state.guans.length; index++) {                  
                  let l1 = this.state.guans[index].left;
                  let t1 = this.state.guans[index].top;
                  //判断是下半圆还是上半圆
                  if(t1>-780){//如果是下半圆
                    let q1 = this.state.guans[index].left+this.state.a;
                    if(q1<-950){//超出最左边
                      this.state.guans[index].left = -950+(-950-this.state.guans[index].left-this.state.a);
                      this.state.guans[index].top = -780-Math.sqrt((1000000-(this.state.guans[index].left-50)*(this.state.guans[index].left-50)));
                    }else if(q1>1050){//超出最右边
                      this.state.guans[index].left = 1050-(this.state.guans[index].left+this.state.a-1050);
                      this.state.guans[index].top = -780-Math.sqrt((1000000-(this.state.guans[index].left-50)*(this.state.guans[index].left-50)));
                    }else{
                      this.state.guans[index].left = this.state.guans[index].left + this.state.a;
                      this.state.guans[index].top = Math.sqrt((1000000-(this.state.guans[index].left-50)*(this.state.guans[index].left-50)))-780;
                    }
                    
                  }else{//如果是上半圆
                    let q1 = this.state.guans[index].left-this.state.a;
                    // console.log(this.state.guans[index].paddingL,'第一次');
                    if(q1<-950){
                      this.state.guans[index].left = -950-(this.state.guans[index].left-this.state.a+950);
                      this.state.guans[index].top = Math.sqrt((1000000-(this.state.guans[index].left-50)*(this.state.guans[index].left-50)))-780;
                    }else if(q1>1050){
                      this.state.guans[index].left = 1050+(1050-this.state.guans[index].left+this.state.a);
                      this.state.guans[index].top = Math.sqrt((1000000-(this.state.guans[index].left-50)*(this.state.guans[index].left-50)))-780;
                    }else{
                      this.state.guans[index].left = this.state.guans[index].left - this.state.a;
                      this.state.guans[index].top = -780-Math.sqrt((1000000-(this.state.guans[index].left-50)*(this.state.guans[index].left-50)));
                    }
                  }
                this.setState({guans:this.state.guans});                  
                }
                for (var index = 0; index < this.state.guansfalse.length; index++) {                  
                  let l1 = this.state.guansfalse[index].left;
                  let t1 = this.state.guansfalse[index].top;
                  //判断是下半圆还是上半圆
                  if(t1>1096){//如果是下半圆
                    let q1 = this.state.guansfalse[index].left+this.state.a;
                    if(q1<-850){//超出最左边
                      this.state.guansfalse[index].left = -850+(-850-this.state.guansfalse[index].left-this.state.a);
                      this.state.guansfalse[index].top = 1096-Math.sqrt((1000000-(this.state.guansfalse[index].left-150)*(this.state.guansfalse[index].left-150)));
                    }else if(q1>1150){//超出最右边
                      this.state.guansfalse[index].left = 1150-(this.state.guansfalse[index].left+this.state.a-1150);
                      this.state.guansfalse[index].top = 1096-Math.sqrt((1000000-(this.state.guansfalse[index].left-150)*(this.state.guansfalse[index].left-150)));
                    }else{
                      this.state.guansfalse[index].left = this.state.guansfalse[index].left + this.state.a;
                      this.state.guansfalse[index].top = Math.sqrt((1000000-(this.state.guansfalse[index].left-150)*(this.state.guansfalse[index].left-150)))+1096;
                    }
                    
                  }else{//如果是上半圆
                    let q1 = this.state.guansfalse[index].left-this.state.a;
                    // console.log(this.state.guans[index].paddingL,'第一次');
                    if(q1<-850){
                      this.state.guansfalse[index].left = -850-(this.state.guansfalse[index].left-this.state.a+850);
                      this.state.guansfalse[index].top = Math.sqrt((1000000-(this.state.guansfalse[index].left-150)*(this.state.guansfalse[index].left-150)))+1096;
                    }else if(q1>1150){
                      this.state.guansfalse[index].left = 1150+(1150-this.state.guansfalse[index].left+this.state.a);
                      this.state.guansfalse[index].top = Math.sqrt((1000000-(this.state.guansfalse[index].left-150)*(this.state.guansfalse[index].left-150)))+1096;
                    }else{
                      this.state.guansfalse[index].left = this.state.guansfalse[index].left - this.state.a;
                      this.state.guansfalse[index].top = 1096-Math.sqrt((1000000-(this.state.guansfalse[index].left-150)*(this.state.guansfalse[index].left-150)));
                    }
                  }
                this.setState({guansfalse:this.state.guansfalse});                  
                }
            },
            onPanResponderTerminationRequest: (evt, gestureState) => true,
            onPanResponderRelease: (evt, gestureState) => {
              // 用户放开了所有的触摸点，且此时视图已经成为了响应者。
              // 一个手势操作已经成功完成。
              console.log("开始手势",gestureState.dx);
              if(gestureState.dx == 0){
                // navigate('Profile0',{user:'行超'});
              }
              this.setState({a:0});
              
            },
            onPanResponderTerminate: (evt, gestureState) => {
              // 另一个组件已经成为了新的响应者，所以当前手势将被取消。
              //<Text style={styles.slideText}>{elem.title}</Text>
            },
          });

    }
    // static navigationOptions = {//页面标题
    //   title: 'Welcome',
    // };
    geren(){
      const { navigate } = this.props.navigation;
      navigate('Findtab',{user:'行超'});
    }
  render() {
    var onThis = this;
    const { navigate } = onThis.props.navigation;
    //真正的十一宫
    var boxs1 = this.state.guans.map(function(elem, index) {
        return(
          <View {...onThis._gestureHandlers.panHandlers} key={elem.key} style={{}}>
          <Image style={{width:width/1.4,height:height/3.6,zIndex:10,left:elem.left,position:'absolute',top:elem.top}} source={elem.url} opacity={1}></Image>
          </View>
        );      
    })
    //背景虚拟的十一宫，陪转
    var boxs2 = this.state.guansfalse.map(function(elem, index) {
      return(
        <View key={elem.key} style={{}}>
        <Image style={{width:120,height:80,zIndex:10,left:elem.left,position:'absolute',top:elem.top}} source={elem.url} opacity={0.3}></Image>
        </View>
      );
    })
    return (
      <View style={{flex: 1, flexDirection: 'column',position:'absolute'}}>
        <View>
          <Image style={styles.image} source={require("./img/ic_bg.png")}></Image>
        </View>
        <View style={{flex: 1, flexDirection: 'column',position:'absolute'}}>
          {boxs1}
          {boxs2}
          <Text style={styles.slideText1}>新 闻 馆</Text>
          <TouchableHighlight onPress={this.geren} style={styles.geren} activeOpacity={1} underlayColor={'#ffffff'}>
            <Image source={require("./img/main_user_icon_2x.png")} style={styles.geren_image}></Image>
          </TouchableHighlight>
          <TouchableHighlight onPress={this.geren} style={styles.tixing} activeOpacity={1} underlayColor={'#ffffff'}>
            <Image source={require("./img/palace_main_bell_icon_2x.png")} style={styles.geren_image}></Image>
          </TouchableHighlight>
          <TouchableHighlight onPress={this.geren} style={styles.caidan} activeOpacity={1} underlayColor={'#ffffff'}>
            <Image source={require("./img/palace_main_misc_icon_2x.png")} style={styles.geren_image}></Image>
          </TouchableHighlight>
        </View>
      </View>
    );
  }

}; 
export default Index = StackNavigator({
  Home: { screen: GugongProject,
    navigationOptions:{
      header:null
    } },
  Profile0: {screen: Guan1},


});

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
      },
      image:{
        height:height,
        width:width,
      },
      slideText1:{
        fontSize:18,
        height:320,
        width: 25,
        zIndex:10,
        color:'burlywood',
        fontFamily: 'suxinshiliukaijian',
        position:'absolute',
        zIndex:10,
        left: width*0.7,
        top: height*0.3,
      },
      geren:{
        position:'absolute',
        left:width*0.05,
        top:height*0.01,
        width:width*0.1,
        height:width*0.1,
      },
      geren_image:{
        width:width*0.1,
        height:width*0.1,
      },
      tixing:{
        position:'absolute',
        left:width*0.7,
        top:height*0.01,
        width:width*0.1,
        height:width*0.1,
      },
      caidan:{
        position:'absolute',
        left:width*0.85,
        top:height*0.01,
        width:width*0.1,
        height:width*0.1,
      }

  });
// AppRegistry.registerComponent('GugongProject', () => Gugong);